<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-table.min.css"/>
</head>
<body>
<div class="row base-margin" id="query">
    <ol class="breadcrumb">
        <li><strong><span style="color: #27a0d7">用户列表</span></strong></li>
    </ol>
    <form class="form-inline" role="form" style="float: left; width: 100%" method="post" id="queryForm">
        <div class="form-group">
            <label for="nickname">名称:</label>
            <input type="text" class="form-control" name="nickname" id="nickname"  placeholder="请输入名称"/>
        </div>
        <div class="form-group">
            <label >日期:</label>
            <input placeholder="开始日期" class="form-control layer-date" id="queryStartTime" name="queryStartTime"/>
            <input placeholder="结束日期" class="form-control layer-date" id="queryEndTime" name="queryEndTime"/>
        </div>
        <div class="form-group">
            <button type="button" id="queryBtn" onclick="doQuery();" class="btn btn-primary">查询</button>
        </div>
        <div class="form-group btn-right">
            <button type="button" class="btn btn-primary" id="addBtn" onclick="addUser();">新增用户</button>
        </div>
    </form>
</div>
<div class="container" style="width: 95%">
    <table id="tradeList"/>
</div>

<script src="libs/jquery.min.js"></script>
<script src="libs/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="js/common.js"></script>
<script type="application/javascript">
    $(function () {
        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();
        console.log('token:'+token);
    });

    function doQuery(params){
        $('#tradeList').bootstrapTable('refresh');    //刷新表格
    }

    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tradeList').bootstrapTable({
                contentType: "application/x-www-form-urlencoded",//必须要有！！！！
                url: '/user/list',         //请求后台的URL（*）
                method: 'get',                      //请求方式（*）
                dataType: 'json',
                toolbar: '#query',                //工具按钮用哪个容器
                pagination: true,                   //是否显示分页（*）
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                clickToSelect: true,                //是否启用点击选中行
                height: $(window).height() - 100,   //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                width: $(window).width() - 10,
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                queryParamsType : "",
                responseHandler: oTableInit.responseHandler,
                silent: true,  //刷新事件必须设置
                formatLoadingMessage: function () {
                    return "请稍等，正在加载中...";
                },
                columns: [
                    {
                        field: 'companyId',
                        checkbox: true
                    },{
                        field: '',
                        title: '序号',
                        formatter: function (value, row, index) {
                            return index + 1;
                        },
                        align: 'center'
                    }, {
                        field: 'nickname',
                        title: '用户名',
                        align: 'center'
                    }, {
                        field: 'email',
                        title: '邮箱/登陆名',
                        align: 'center'
                    }, {
                        field: 'createTime',
                        title: '录入时间',
                        align: 'center'
                        /*,
                         formatter : function (value, row, index){
                         return new Date(value).format('yyyy-MM-dd hh:mm:ss');
                         }*/
                    }, {
                        field: 'lastLoginTime',
                        title: '最近登陆时间'
                        /*,
                         formatter : function (value, row, index){
                         return new Date(value).format('yyyy-MM-dd hh:mm:ss');
                         }*/,
                        align: 'center'
                    }, {
                        field: 'status',
                        title: '状态',
                        formatter : function (value, row, index){
                            return value == 1 ? '启用' : '禁用';
                        },
                        align: 'center'
                    }, {
                        title: '操作',
                        field: 'id',
                        align: 'center',
                        formatter:function(value,row,index){
                            var e = '<a href="#" mce_href="#" onclick="edit(\''+ row.id + '\')">编辑</a> ';
                            var d = '<a href="#" mce_href="#" onclick="del(\''+ row.id +'\')">删除</a> ';
                            return e+d;
                        }
                    }]
            });
        };

        oTableInit.responseHandler = function(res) {
            if (res) {
                return {
                    "rows" : res.list,
                    "total" : res.total
                };
            } else {
                return {
                    "rows" : [],
                    "total" : 0
                };
            }
        }

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                pageSize : params.pageSize,
                pageNum : params.pageNumber
            };
            return temp;
        };
        return oTableInit;
    };

</script>
</body>
</html>